<template>
  <div class="transfer-container">
    <!-- 第一行，按钮组、日期选择器和搜索框 -->
    <InputButton ref="inputButton" @create="create" />
    <!-- 第二行，调拨订单表 -->
    <el-card style="margin-top: 5px">
      <el-table
        border
        :data="list"
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <!-- 表格字段 -->
        <el-table-column type="index" align="center" />
        <el-table-column
          prop="id"
          label="调拨单号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="date"
          label="创建日期"
          sortable
          width="110"
          align="center"
        />
        <el-table-column
          prop="size"
          label="货物种类"
          width="50"
          align="center"
        />
        <el-table-column
          prop="sum"
          label="货物总数"
          width="50"
          align="center"
        />
        <el-table-column label="调出" align="center">
          <el-table-column
            prop="outWarehouse"
            label="仓库"
            width="50"
            align="center"
          />
          <el-table-column
            prop="outArea"
            label="分区"
            width="50"
            align="center"
          />
          <el-table-column
            prop="outPosition"
            label="库位"
            width="50"
            align="center"
          />
        </el-table-column>

        <el-table-column label="调入" align="center">
          <el-table-column
            prop="inWarehouse"
            label="仓库"
            width="50"
            align="center"
          />
          <el-table-column
            prop="inArea"
            label="分区"
            width="50"
            align="center"
          />
          <el-table-column
            prop="inPosition"
            label="库位"
            width="50"
            align="center"
          />
        </el-table-column>

        <el-table-column label="状态" width="80" align="center">
          <template slot-scope="{ row }">
            <el-tag
              :type="
                row.flag === 0 ? 'warning' : row.flag === 2 ? 'success' : ''
              "
            >{{
              row.flag === 0 ? "待调拨" : row.flag === 2 ? "已调拨" : "调拨中"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        ><template slot-scope="{ row }">
          <el-button
            :v-show="row.sum !== 20"
            size="small"
            circle
            icon="el-icon-search"
            @click="showDialog(row)"
          />
          <el-button
            :v-show="row.sum !== 20"
            type="primary"
            size="small"
            circle
            icon="el-icon-edit"
            @click="showDialogs(row)"
          />
          <el-button
            v-show="row.flag === 0"
            type="danger"
            size="small"
            circle
            icon="el-icon-delete"
            @click="cancel(row)"
          /></template></el-table-column>
      </el-table>
    </el-card>

    <!-- 查看弹窗 -->
    <Dialog ref="dialog" @get="get" />
    <!-- 修改弹窗 -->
    <Dialogs ref="dialogs" @get="get" />
  </div>
</template>

<script>
// 引入组件
import InputButton from '@/components/InputButton/index.vue'
import Dialog from '@/views/task/transfer/Dialog/index.vue'
import Dialogs from '@/views/task/transfer/Dialog/indexs.vue'

export default {
  name: 'Transfer',
  components: {
    InputButton,
    Dialog,
    Dialogs
  },
  data() {
    return {
      // 调拨订单列表
      list: []
    }
  },
  mounted() {
    // 获取调拨订单信息
    this.get()
  },
  methods: {
    // 查看订单详情
    showDialog(row) {
      this.$refs['dialog'].dialogVisible = true
      this.$nextTick(function() {
        // bug-fix：这里不能只获得某个仓库中有的货物信息（仅有的几个7号货物全部绑定了调拨订单，导致7号的名称查不出来）
        this.$refs['dialog'].goods = []
        // 子组件状态标记（true：添加，false：查看）
        this.$refs['dialog'].flag = false
        // 共享数据到子组件
        this.$refs['dialog'].id = row.id
        this.$refs['dialog'].date = row.date
        this.$refs['dialog'].transfers = row.transfers
        const outList = [row.outWarehouseId + '', row.outAreaId + '', row.outPositionId + '']
        this.$refs['dialog'].outList = outList
        const inList = [row.inWarehouseId + '', row.inAreaId + '', row.inPositionId + '']
        this.$refs['dialog'].inList = inList
      })
    },
    // 修改调拨订单状态
    showDialogs(row) {
      this.$refs['dialogs'].dialogVisible = true
      this.$nextTick(function() {
        // 共享数据到子组件
        this.$refs['dialogs'].id = row.id
        this.$refs['dialogs'].date = row.date
        const outList = [row.outWarehouseId + '', row.outAreaId + '', row.outPositionId + '']
        this.$refs['dialogs'].outList = outList
        const inList = [row.inWarehouseId + '', row.inAreaId + '', row.inPositionId + '']
        this.$refs['dialogs'].inList = inList
        // 调用子组件中的函数，获取调拨货物信息
        this.$refs['dialogs'].getTransfer(row.id)
      })
    },
    // 取消调拨
    cancel(row) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelItem(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取调拨订单
    async get() {
      const response = await this.$API.transfer.get()
      if (response.code === 200) {
        this.list = response.data
      } else {
        this.$message.error(response.msg)
      }
    },
    // 创建调拨订单
    create() {
      this.$refs['dialog'].dialogVisible = true
      this.$nextTick(async function() {
        // 订单id
        const response = await this.$API.transfer.getId()
        if (response.code === 200) {
          // 调拨订单id
          this.$refs['dialog'].id = response.data
          // 子组件状态标记（true：添加，false：查看）
          this.$refs['dialog'].flag = true
          this.$refs['dialog'].transfers = []
          this.$refs['dialog'].outList = []
          this.$refs['dialog'].inList = []
        }
      })
    },
    // 取消调拨订单
    async cancelItem(row) {
      const response = await this.$API.transfer.cancel(row.id)
      if (response.code === 200) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新拉取调拨订单数据
        this.get()
      } else {
        this.$message({
          type: 'error',
          message: '删除失败!'
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.transfer {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
